<template>

  <!--
    日期范围选择器:
     type: 'dateRange'
     beginName:      开始时间绑定名称（默认beginTime）
     endName:        结束时间绑定名称（默认endTime）
   -->
  <el-date-picker
    v-model="computedRangeDate"
    end-placeholder="结束日期"
    start-placeholder="开始日期"
    type="daterange"
    value-format="yyyy-MM-dd"
    :clearable="clearable"
    :disabled="booleanFun(disabled)"
    :style="{width}"
    size="mini"
  />

</template>

<script>

import {booleanFun, notNull} from '@/components/FlyElement/common'

export default {
  name: 'ADateRange',
  props: {
    label: {
      type: String,
      default: '创建时间'
    },
    beginTime: {
      type: String
    },
    endTime: {
      type: String
    },
    width: {
      type: String,
      default: '100%'
    },
    disabled: {
      type: Boolean
    },
    clearable: {
      type: Boolean
    }
  },
  data() {
    return {
      dateRangeData: []
    }
  },
  computed: {
    computedRangeDate: {
      get() {
        if (notNull(this.beginTime) || notNull(this.endTime)) {
          return [this.beginTime, this.endTime]
        }
        return []
      },
      set(value) {
        this.dateRangeData = value
        if (value) {
          this.$emit('update:beginTime', value[0])
          this.$emit('update:endTime', value[1])
        } else {
          this.$emit('update:beginTime', undefined)
          this.$emit('update:endTime', undefined)
        }
      }
    }
  },
  methods: {
    booleanFun
  }
}
</script>
